<template>
  <div class="configList">
    <div v-if="type === '1'" class="row">
      <div :gutter="20" class="header">
        <span class="title">自动更新进度配置</span>
        <div class="recordBtn">
          <RPButton optType="reset" style="margin-right: 10px" @click="recordList('1')" text="操作记录" />
        </div>
      </div>
      <Row :gutter="20">
        <Col span="8">
          <RPButton @click="clickUpdate('auto')" text="进度更新"></RPButton>
        </Col>
        <Col span="8"> 最近更新周期： {{ time }} </Col>
      </Row>
    </div>
    <div v-if="type === '1'" class="row">
      <div :gutter="20" class="header">
        <span class="title">填报配置</span>
        <div class="recordBtn">
          <RPButton style="margin-right: 10px; height: 34px" @click="clickEdit" text="编辑"></RPButton>
          <RPButton
            v-if="type === '1'"
            optType="reset"
            style="margin-right: 10px"
            @click="recordList('2')"
            text="操作记录"
          />
        </div>
      </div>
      <Row :gutter="20">
        <Col span="8">
          <span>填报权限：</span>
          <i-switch v-model="writePermission" disabled>
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
          <!-- {{ writePermission ? '开': '关' }} -->
        </Col>
        <Col span="8">
          <span>审批权限：</span>
          <i-switch v-model="examinePermission" disabled>
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
          <!-- {{ examinePermission ? '开': '关' }} -->
        </Col>
        <Col span="8"> 填报周期： {{ taskSubmitTime }} </Col>
      </Row>
    </div>
    <div v-if="type === '1'" class="row">
      <div :gutter="20" class="header">
        <span class="title">统计配置</span>
        <div class="recordBtn">
          <RPButton optType="reset" style="margin-right: 10px" @click="recordList('3')" text="操作记录" />
        </div>
      </div>
      <Row :gutter="20">
        <Col span="8">
          <RPButton @click="clickUpdate('count')" text="统计"></RPButton>
        </Col>
        <Col span="8"> 最近统计周期： {{ countTime }} </Col>
      </Row>
    </div>
    <div v-if="type === '2'" class="row">
      <div :gutter="20" class="header">
        <span class="title">填报配置</span>
      </div>
      <Row :gutter="20">
        <Col span="8">
          <RPButton @click="clickUpdate('cover')" text="编辑"></RPButton>
        </Col>
        <Col span="8"> 填报周期： {{ writeablePeriod }} </Col>
      </Row>
    </div>
    <div v-if="type === '2'" class="row">
      <div :gutter="20" class="header">
        <span class="title">统计配置</span>
      </div>
      <Row :gutter="20">
        <Col span="8">
          <RPButton @click="clickUpdate('coverCount')" text="统计"></RPButton>
        </Col>
        <Col span="8"> </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import editConfig from './editConfig.vue'
import autoUpdate from './autoUpdate.vue'
import sysConfigApi from '@/api/sysConfig.js'
import revisionRecord from './revisionRecord.vue'
import { mapState } from 'vuex'
export default {
  name: 'config-list',
  props: {
    type: {
      typeof: String,
      default: () => ''
    },
    reportName: {
      typeof: String,
      default: () => ''
    }
  },
  data() {
    return {
      detail: {},
      writePermission: false, // 填报权限
      examinePermission: false, // 审批权限
      time: '-', // 自动更新周期
      countTime: '-', // 统计周期
      taskSubmitTime: '-', // 填报配置--填报周期
      titleMap: {
        auto: '自动更新进度配置',
        cover: '填报配置',
        count: '统计配置',
        coverCount: '统计配置',
        default: '配置'
      },
      staticQuarter: '2024-Q1' // 覆盖度统计临时写死
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    ...mapState(['writeablePeriod'])
  },
  methods: {
    init() {
      this.getConfig()
    },
    getConfig() {
      sysConfigApi.getCurrentConfig({ reportName: this.reportName }).then(res => {
        const data = res.data.data
        this.detail = data
        if (data) {
          this.writePermission = data.writePermission
          this.examinePermission = data.examinePermission
          this.time = (data.taskYear || '') + '-' + (data.taskQuarter || '')
          this.countTime = (data.statisticsYear || '') + '-' + (data.statisticsQuarter || '')
          this.taskSubmitTime = (data.taskSubmitYear || '') + '-' + (data.taskSubmitQuarter || '')
        }
      })
    },
    recordList(type) {
      new this.$pageModal(revisionRecord, {
        props: {
          type: type,
          reportName: this.reportName
        }
      })
    },
    yearMap(type, timeFrame) {
      const getYearByType = {
        auto: () => (timeFrame === 'year' ? '' + this.detail.taskYear : '' + this.detail.taskQuarter),
        cover: () => (timeFrame === 'year' ? this.writeablePeriod.split('-')[0] : this.writeablePeriod.split('Q')[1]),
        count: () => (timeFrame === 'year' ? '' + this.detail.statisticsYear : '' + this.detail.statisticsQuarter),
        coverCount: () => (timeFrame === 'year' ? this.staticQuarter.split('-')[0] : this.staticQuarter.split('Q')[1])
      }
      const yearGetter = getYearByType[type]
      return yearGetter()
    },
    clickUpdate(type) {
      new this.$pageModal(
        autoUpdate,
        {
          props: {
            title: this.titleMap[type],
            type: type,
            year: this.yearMap(type, 'year'),
            quarter: this.yearMap(type, 'quarter'),
            reportName: this.reportName
          }
        },
        data => {
          if (data === true) {
            this.getConfig()
          } else if (typeof data === 'object') {
            // 覆盖度统计临时写死
            this.staticQuarter = data.taskYear + '-Q' + data.taskQuarter
          }
        }
      )
    },
    clickEdit() {
      new this.$pageModal(
        editConfig,
        {
          props: {
            type: this.type,
            reportName: this.reportName,
            writePermission: this.writePermission,
            examinePermission: this.examinePermission,
            year: '' + this.detail.taskSubmitYear,
            quarter: '' + this.detail.taskSubmitQuarter
          }
        },
        data => {
          if (data) {
            this.getConfig()
          }
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.configList {
  height: 100%;
  // background-color: #f4f6fd;
  .row {
    margin-bottom: 20px;
    padding: 10px 10px;
    margin: 10px 10px;
    border-radius: 4px;
    background-color: #fff;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .header {
    margin-bottom: 20px;
  }
  .recordBtn {
    display: flex;
    float: right;
  }
}
</style>
